<template>
  <div class="student-layout">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <h1>研究生奖学金管理系统</h1>
          <div class="user-info">
            <span>欢迎，{{ studentName }}</span>
            <el-button link @click="logout">退出登录</el-button>
          </div>
        </div>
      </el-header>
      
      <el-container>
        <el-aside width="250px" class="sidebar">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="dashboard">
              <el-icon><DataBoard /></el-icon>
              <span>仪表板</span>
            </el-menu-item>
            <el-menu-item index="apply-scholarship">
              <el-icon><Document /></el-icon>
              <span>申请奖学金</span>
            </el-menu-item>
            <el-menu-item index="my-applications">
              <el-icon><DocumentChecked /></el-icon>
              <span>我的申请</span>
            </el-menu-item>
            <el-menu-item index="course-scores">
              <el-icon><Trophy /></el-icon>
              <span>课程成绩</span>
            </el-menu-item>
            <el-menu-item index="rules">
              <el-icon><Document /></el-icon>
              <span>奖学金规则</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  DataBoard, Document, Trophy, DocumentChecked
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const studentName = ref(localStorage.getItem('name') || '学生')

// 根据当前路由计算激活的菜单项
const activeMenu = computed(() => {
  const path = route.path
  if (path.includes('dashboard')) return 'dashboard'
  if (path.includes('apply-scholarship')) return 'apply-scholarship'
  if (path.includes('my-applications')) return 'my-applications'
  if (path.includes('course-scores')) return 'course-scores'
  if (path.includes('scholarship-rules')) return 'rules'
  return 'dashboard'
})

const handleMenuSelect = (index) => {
  switch (index) {
    case 'dashboard':
      router.push('/student/dashboard')
      break
    case 'apply-scholarship':
      router.push('/student/apply-scholarship')
      break
    case 'my-applications':
      router.push('/student/my-applications')
      break
    case 'course-scores':
      router.push('/student/course-scores')
      break
    case 'rules':
      router.push('/student/scholarship-rules')
      break
  }
}

const logout = () => {
  localStorage.clear()
  router.push('/login')
}
</script>

<style scoped>
.student-layout {
  height: 100vh;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.header-content h1 {
  margin: 0;
  font-size: 20px;
}

.sidebar {
  background-color: #f5f7fa;
  border-right: 1px solid #e6e6e6;
}

.sidebar-menu {
  border-right: none;
}

.main-content {
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}
</style> 